<template>
  <div>
    <el-table
      ref="handSelectTest_multipleTable"
      v-loading.lock="loading"
      :data="tableData"
      :cell-style="columnStyle"
      :stripe="stripe"
      highlight-current-row
      :row-key="rowKey"
      :lazy="lazy"
      :load="load"
      border
      :max-height="curHeight"
      :span-method="arraySpanMethod"
      :header-cell-style="{
        'text-align': 'center',
        background: 'rgba(36, 116, 251, .08)',
        color: '#333',
        'border-color': '#F2F2F2!important',
      }"
      style="width: 100%; margin: 0 auto; overflow: auto"
      @select="select"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        v-if="iSselection"
        :selectable="selectableRow"
        type="selection"
        fixed
        width="45"
        align="center"
      />
      <el-table-column
        v-if="showIndex"
        type="index"
        label="序号"
        sortable
        :index="indexFn1"
        :column-key="columnKey"
        width="60"
      />
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        :prop="item.key"
        :align="item.align"
        :label="item.title"
        :fixed="item.fixed"
        :filter-method="item.filterTag"
        filter-placement="bottom-start"
        :show-overflow-tooltip="true"
        :width="item['width'] || item['minWidth']"
      >
        <template slot-scope="scope">
          <ex-slot
            v-if="item.render"
            :render="item.render"
            :row="scope.row"
            :index="scope.$index"
            :column="item"
          />
          <span v-else>{{ scope.row[item.key]==null?'-':scope.row[item.key] }}</span>
        </template>
      </el-table-column>
      
      <el-table-column
        v-if="tableOption.label"
        :width="tableOption.width"
        :label="tableOption.label"
        align="center"
        class-name="small-padding fixed-width"
      />
    </el-table>
    <el-pagination
      v-if="isPagin"
      style="text-align: center; position: absolute; bottom: 10px; width: 100%"
      :current-page="currentPage"
      :page-size="pageSize"
      :layout="layout"
      :total="totalLength"
      :page-sizes="pageSizes"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
// 自定义内容的组件 -E
var exSlot = {
  functional: true,
  props: {
    render: Function,
    index: Number,
    column: {
      type: Object,
      default: null
    }
  },
  render: (h, data) => {
    const params = {
      row: data.data.attrs.row,
      index: data.props.index
    }
    if (data.props.columns) params.columns = data.props.columns
    return data.props.render(h, params)
  }
}
import Sortable from 'sortablejs'
export default {
  // name: 'elTable',
  components: { exSlot },
  props: {
    columns: {
      type: Array,
      default: function() {
        return []
      }
    },
    stripe: {
      type: Boolean,
      default: true
    },
    tableData: {
      type: Array,
      default: function() {
        return []
      }
    },
    tableOption: {
      type: Object,
      default: () => {
        return {}
      }
    },
    curHeight: {
      type: Number,
      default: 0
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    rowKey: {
      type: String,
      default: 'id'
    },
    columnKey: {
      type: String,
      default: ''
    },
    arraySpanMethod: {
      type: Function,
      default: () => () => {}
    },
    summaryMethod: {
      type: Function,
      default: () => () => {}
    },
    offsetTop: {
      type: Number,
      default: 175
    },
    lazy: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    load: {
      type: Function,
      default: () => () => {}
    },
    iSselection: {
      type: Boolean,
      default: false
    },
    showIndex: {
      type: Boolean,
      default: true
    },
    handleSelectionChange: {
      type: Function,
      default: () => () => {}
    },
    select: {
      type: Function,
      default: () => () => {}
    },
    selectableRow: {
      type: Function,
      default: () => () => {}
    },
    isPagin: {
      type: Boolean,
      default: true
    },
    handleSizeChange: {
      type: Function,
      default: () => () => {}
    },
    handleCurrentChange: {
      type: Function,
      default: () => () => {}
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    pageSizes: {
      type: Array,
      default: () =>  []
    },
    totalLength: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sortString:null,
    }
  },
  mounted() {this.rowDrop()},
  created: function() {},
  computed: {
    layout() {
      if(this.pageSizes.length) return   "total,sizes, prev, pager, next, jumper"
      return "total, prev, pager, next, jumper"
    }
  },
  methods: {
    // 上移
    moveUp(index, row) {
      if (index > 0) {
        const upDate = this.tableData[index - 1];
        this.tableData.splice(index - 1, 1);
        this.tableData.splice(index, 0, upDate);
      } else {
        alert("已经是第一条，不可上移");
      }
    },
    // 下移
    moveDown(index, row) {
      if (index + 1 === this.tableData.length) {
        alert("已经是最后一条，不可下移");
      } else {
        const downDate = this.tableData[index + 1];
        this.tableData.splice(index + 1, 1);
        this.tableData.splice(index, 0, downDate);
      }
    },
    //行拖拽,排序方法
    rowDrop() {
        const el = this.$refs.handSelectTest_multipleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
        this.sortable = Sortable.create(el, {
          ghostClass: 'sortable-ghost',
          setData: function(dataTransfer) {
            dataTransfer.setData('Text', '')
          },
          onEnd: evt => {
            const targetRow = this.tableData.splice(evt.oldIndex, 1)[0];
            this.tableData.splice(evt.newIndex, 0, targetRow);

          }
        });
        
      },
    indexFn1(index) {
      index = index + 1 + (this.currentPage - 1) * this.pageSize
      return index
    },
    columnStyle({ row, column, rowIndex, columnIndex }) {
      // eslint-disable-next-line eqeqeq
      if (rowIndex == 0 || rowIndex % 2 == 0) {
        return 'text-align:center;color:#333;padding: 9px 0;border-color: #F2F2F2!important;'
      } else {
        return 'text-align:center;background:rgba(36, 116, 251,.03);color:#333;padding: 9px 0;border-color: #F2F2F2!important;'
      }
    }
  }
}
</script>
<style>

.el-tooltip__popper{max-width:50% !important}
</style>
<style scoped>
.el-table::before {
  height: 0px !important;
}
.el-checkbox__inner {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid #2474Fb !important;
}
.el-checkbox__input.is-disabled .el-checkbox__inner {
  border: 1px solid #2474Fb !important;
}
.el-checkbox__inner::after {
  height: 8px !important;
  left: 5px !important;
}
.el-table th > .cell {
  white-space: nowrap !important;
}
::-webkit-scrollbar {
  width: 10px !important;
  height: 10px !important;
}
.el-table__fixed::before {
  height: 0px !important;
}

.el-table /deep/ .el-table__fixed-right::before,
.el-table /deep/ .el-table__fixed::before {
  height: 0 !important;
}
.el-table /deep/ .el-table--border td {
  border-color: #F2F2F2!important;
}
.el-pagination /deep/ .el-input__inner {
  /* width: 30px; */
  height: 16px;
  border-radius: 2px;
}
.el-pagination /deep/ .btn-prev {
  background: transparent!important;
}
.el-pagination /deep/ .el-pager .number {
  background: transparent!important;
}
.el-pagination /deep/ .el-pager .active {
  color:#2474Fb!important;
}
.el-pagination /deep/ .btn-next {
  background: transparent!important;
}
.el-table /deep/ .cell button {
  padding: 0 !important;
  min-width: 43px !important;
  font-size: 14px !important;
}
</style>
